<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>球球合成小游戏</title>
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/responsive.css" />
  </head>
  <body>
    <div id="gameContainer">
      <!-- 游戏标题 -->
      <header class="game-header">
        <h1>球球合成</h1>
        <div class="score-display">
          <span>分数: <span id="score">0</span></span>
          <span>最高分: <span id="highScore">0</span></span>
        </div>
      </header>

      <!-- 游戏主界面 -->
      <main class="game-main">
        <!-- 游戏画布容器 -->
        <div class="canvas-container">
          <canvas id="gameCanvas"></canvas>

          <!-- 游戏结束遮罩 -->
          <div id="gameOverlay" class="game-overlay hidden">
            <div class="overlay-content">
              <h2 id="overlayTitle">游戏开始</h2>
              <p id="overlayMessage">点击罐子上方生成球体，合成更高级的球！</p>
              <button id="startButton" class="game-button">开始游戏</button>
              <button id="restartButton" class="game-button hidden">
                重新开始
              </button>
            </div>
          </div>
        </div>

        <!-- 游戏控制面板 -->
        <div class="control-panel">
          <div class="game-info">
            <div class="next-ball">
              <span>下一个球:</span>
              <div id="nextBallPreview" class="ball-preview"></div>
            </div>
            <div class="game-stats">
              <div>连击: <span id="combo">0</span></div>
              <div>最高级球: <span id="maxLevel">1</span></div>
            </div>
          </div>

          <!-- 道具栏 -->
          <div class="power-ups">
            <button class="power-up-btn" id="bombBtn" title="炸弹">
              💣 <span class="count">3</span>
            </button>
            <button class="power-up-btn" id="magnetBtn" title="磁铁">
              🧲 <span class="count">2</span>
            </button>
            <button class="power-up-btn" id="pauseBtn" title="暂停">
              ⏸️ <span class="count">1</span>
            </button>
          </div>
        </div>
      </main>

      <!-- 设置菜单 -->
      <div id="settingsMenu" class="settings-menu hidden">
        <div class="settings-content">
          <h3>游戏设置</h3>
          <div class="setting-item">
            <label>音效: </label>
            <input type="checkbox" id="soundToggle" checked />
          </div>
          <div class="setting-item">
            <label>震动: </label>
            <input type="checkbox" id="vibrationToggle" checked />
          </div>
          <div class="setting-item">
            <label>游戏模式: </label>
            <select id="gameModeSelect">
              <option value="classic">经典模式</option>
              <option value="timed">限时模式</option>
              <option value="challenge">挑战模式</option>
              <option value="zen">禅模式</option>
            </select>
          </div>
          <button id="closeSettings" class="game-button">关闭</button>
        </div>
      </div>

      <!-- 底部按钮 -->
      <footer class="game-footer">
        <button id="settingsBtn" class="footer-btn">⚙️ 设置</button>
        <button id="helpBtn" class="footer-btn">❓ 帮助</button>
        <button id="pauseGameBtn" class="footer-btn">⏸️ 暂停</button>
      </footer>
    </div>

    <!-- 引入物理引擎 -->
    <script src="libs/matter.min.js"></script>

    <!-- 引入游戏模块 -->
    <script src="js/utils.js"></script>
    <script src="js/audio.js"></script>
    <script src="js/physics.js"></script>
    <script src="js/renderer.js"></script>
    <script src="js/ui.js"></script>
    <script src="js/game.js"></script>
  </body>
</html>
